<template>
	<div>
		<el-table :data="tableData" style="width: 100%" class="contract-table">
			<el-table-column prop="time" label="时间">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<span class="text-[14px] font-[400]">{{ scope.row.time }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="coin" label="合约">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<p class="text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
						<p class="text-#86909C text-12px  rounded-4px w-36px text-center box-border">
							{{ scope.row.contract }}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="methods" label="类型" :filters="[
				{ text: '限价止盈', value: '限价止盈' },
				{ text: '限价止损', value: '限价止损' },
				{ text: '市价止盈', value: '市价止盈' },
				{ text: '市价止损', value: '市价止损' }
			]" :filter-multiple="false" filter-class-name="filter-contract-tables" :filter-method="filterMethods">
				<template #filter-icon>
					<el-icon class="ml-6px">
						<CaretBottom />
					</el-icon>
				</template>
			</el-table-column>
			<el-table-column prop="to" label="方向" :filters="[
				{ text: '开多', value: '开多' },
				{ text: '开空', value: '开空' },
				{ text: '平多', value: '平多' },
				{ text: '平空', value: '平空' },
			]" :filter-multiple="false" filter-class-name="filter-contract-tables " :filter-method="filterTo">
				<template #filter-icon>
					<el-icon class="ml-6px">
						<CaretBottom />
					</el-icon>
				</template>
				<template #default="scope">
					<div class="pt-10px pb-10px" :class="{ 'text-#07B175': scope.row.to, 'text-#F34E5F': !scope.row.to }">
						{{ (scope.row.to ? '开多' : '开空') }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格">
			</el-table-column>
			<el-table-column prop="sum" label="数量">
			</el-table-column>
			<el-table-column prop="sumTrade" label="成交数量">
			</el-table-column>
			<el-table-column prop="triggerPrice" label="触发条件">
				<template #default="scope">
					<div>
						<div v-if="scope.row.triggerMethods">
							<p>{{ scope.row.triggerMethods }}</p>
							<p>{{ scope.row.triggerPrice }}</p>
						</div>
						<div v-else>
							<p>--/--</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="right" :filters="[
				{ text: '已触发', value: '已触发' },
				{ text: '已撤销', value: '已撤销' },
				{ text: '已失效', value: '已失效' }
			]" :filter-multiple="false" filter-class-name="filter-contract-tables " :filter-method="filterStatus">
				<template #filter-icon>
					<el-icon class="ml-6px">
						<CaretBottom />
					</el-icon>
				</template>
				<template #default="scope">
					<div class="text-#B5B5B5">
						{{ scope.row.status }}
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref<any[]>([
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: false,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00',
		status: '已触发'
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '',
		triggerPrice: '',
		status: '已撤销'
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00',
		status: '已失效'
	}
])
const filterMethods = (value: string, row: any) => {
	return row.methods === value
}

const filterTo = (value: boolean, row: any) => {
	return row.to === value
}

const filterStatus = (value: string, row: any) => {
	return row.status === value
}
</script>

<style lang="scss" scoped>
.contract-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>
